import React, { Component } from 'react';
import { Toast , Modal } from 'antd-mobile'
import {
  Route,
  withRouter,
} from 'react-router-dom'
import qs from "qs"
import { TaskInfoStyled, MainStyled, PublisherStyled} from './TaskInfoStyled'

import Navigation from 'components/Navigation/Navigation'
import UIButton from 'components/UIButton/UIButton'
import Progress from 'components/Progressbar/Progressbar'

import back from 'images/nav/whiteback@3x.png'




const arr = ["","",""]


class TaskDetail extends Component  {
  state = {
    taskData:{}
  }
  render() {
  
    return (
      <TaskInfoStyled>
        <Navigation
        titleSize = '.17rem'
        title = "任务详情"
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft("left")}

        ></Navigation>

        <MainStyled>
            <p className="jiedan">接单信息</p>
          <PublisherStyled>
            <div className="one">
              <p className="nichen">{this.state.taskData.userone?this.state.taskData.userone.uname:''}</p>
              <p className='price'>￥<span>{this.state.taskData.price?this.state.taskData.price:'0'}</span></p>           
            </div>

            <div className="two">
              <Progress
                width='60%'
                height= '.08rem'
                borderRadius = '.02rem'
                progressWidth={this.state.taskData.userone?this.state.taskData.userone.jd:'0%'}
                progressColor = '#56D9D1'
              ></Progress>
              {/* <p>等级</p> */}
            </div>
          </PublisherStyled>
          <div className="taskExplain">
            <p className="explain">{this.state.taskData.tname}</p>
            <p className="explainContent">{this.state.taskData.tcontent}</p>

            <p className = "time">送达时间： <span>{this.state.taskData.endtime}</span></p>
            <p className="address">送达地址： <span>{this.state.taskData.staplace}</span></p>
          </div>
          <p className="tips">温馨提示：送达后赏金将在1小时内转入接单人账户中</p>
          <div className="btn">
                    <UIButton
                        title='未送达'
                        width='1.14rem'
                        height='.3rem'
                        borderRadius='.05rem'
                        backgroundColor = "#D9D9D9"
                        titleColor='#fff'
                        titleSize = '.17rem'
                    ></UIButton>
                    <UIButton
                        title='已送达'
                        width='1.14rem'
                        height='.3rem'
                        borderRadius='.05rem'
                        backgroundColor = "#56D9D1"
                        titleColor='#fff'
                        titleSize = '.17rem'
                        clickButton = {()=>this.onClickcheck()}
                    ></UIButton>
            </div>
        </MainStyled>

      </TaskInfoStyled>
    );
  }
  componentDidMount(){
    let tag = this.props.match.params.id
    let body = {tid: tag}
    fetch('/Legang/task/findtid',{   
      method:"POST",
      headers:{
          "Content-type":"application/x-www-form-urlencoded",
      },     
      body: qs.stringify(body)
    })    
    .then(response => response.json())
    .then(result => {
      if(result.flag){
        console.log(result)
        var timestamp = result.data.endtime;
        var d = new Date(timestamp );   
        var date = (d.getFullYear()) + "-" + 
                (d.getMonth() + 1) + "-" +
                (d.getDate()) + " " + 
                (d.getHours()) + ":" + 
                (d.getMinutes()) + ":" + 
                (d.getSeconds());
            result.data.endtime = date
        if(result.data.userone){

        if(result.data.userone.exp){
          if(result.data.userone.exp>=500){
            result.data.userone.jd = '100%'
            result.data.userone.dj = 'lv5'
          }else if(result.data.userone.exp>=400){
          result.data.userone.jd = '800%'
          result.data.userone.dj = 'lv4'
          }else if(result.data.userone.exp>=300){
          result.data.userone.jd = '60%'
          result.data.userone.dj = 'lv3'
          }else if(result.data.userone.exp>=200){
          result.data.userone.jd = '40%'
          result.data.userone.dj = 'lv2'
          }else{
            result.data.userone.dj = 'lv1'  
            result.data.userone.jd = '20%'
          }
        }else{
          result.data.userone.dj = 'lv1'
          result.data.userone.jd = '20%'
        }
      }
        this.setState({
          taskData : result.data
        },
        ()=>{
          console.log(this.state.taskData)
          }
        )
      }else{
        Toast.info(result.errorMsg)
      }
      
    })
  }
  onClickcheck(){
    this.props.history.go(-1)

    
  }
  onClickLeft(tag){
    this.props.history.go(-1)
    // Toast.info(tag+"返回",  .5, ()=>{console.log("隐藏后进回调")}, false);

    
  }
}



export default withRouter(TaskDetail)